<div ui-i18n="en" class="ui-grid">
  <!-- TODO (c0bra): add "scoped" attr here, eventually? -->
  <style ui-grid-style>
    .grid{{ grid.id }} {
      /* Styles for the grid */
    }

    .grid{{ grid.id }} .ui-grid-row, .grid{{ grid.id }} .ui-grid-cell, .grid{{ grid.id }} .ui-grid-cell .ui-grid-vertical-bar {
      height: {{ grid.options.rowHeight }}px;
    }

    .grid{{ grid.id }} .ui-grid-row:last-child .ui-grid-cell {
      border-bottom-width: {{ ((grid.getTotalRowHeight() < grid.getViewportHeight()) && '1') || '0' }}px;
    }

    {{ grid.verticalScrollbarStyles }}
    {{ grid.horizontalScrollbarStyles }}

    .ui-grid[dir=rtl] .ui-grid-viewport {
      padding-left: {{ grid.verticalScrollbarWidth }}px;
    }

    {{ grid.customStyles }}
  </style>

  <div ui-grid-menu-button ng-if="grid.options.enableGridMenu"></div>

  <div ui-grid-render-container container-id="'body'" col-container-name="'body'" row-container-name="'body'" bind-scroll-horizontal="true" bind-scroll-vertical="true" enable-scrollbars="grid.options.enableScrollbars"></div>

  <div ui-grid-column-menu ng-if="grid.options.enableColumnMenu"></div>

  <div ng-transclude></div>
</div>
